第13章客户端检测

想要知道自己代码运行在什么浏览器上，大部分开发者会分析 window.navigator.userAgent 返回的字符串值。所有浏览器都会提供这个值，如果相信这些返回值并基于给定的一组浏览器检测这个字符串，最终会得到关于浏览器和操作系统的比较精确的结果。

通过解析浏览器返回的用户代理字符串，可以推断出下列相关的环境信息：

浏览器
浏览器版本
浏览器渲染引擎
设备类型(桌面/移动)
设备生产商
设备型号
操作系统
操作系统版本

navigator.geolocation 可以让浏览器脚本感知当前设备的地理位置。

要获取浏览器当前的位置，可以使用 getCurrentPosition() 方法。这个方法返回一个 Coordinates 对象：

navigator.geolocation.getCurrentPosition((position) => {
  p = position;   
  console.log(p.timestamp); // 1673597776813
  console.log(p.coords);     // Coordinates {...}
});

获取浏览器地理位置并不能保证成功。因此 getCurrentPosition() 方法也接收失败回调函数作为第二个参数，这个函数会收到一个 PositionError 对象。在失败的情况下，PositionError 对象中会包含一个 code 属性和一个 message 属性，后者包含对错误的简短描述。code 属性是一个整数，表示以下 3 种错误：

PERMISSION_DENIED 浏览器未被允许访问设备位置
POSITION_UNAVAILABLE 系统无法返回任何位置信息
TIMEOUT 获取位置超时

navigator.geolocation.getCurrentPosition(
  () => {},
  (e) => {
    console.log(e.code);     // 1
    console.log(e.message);  // User denied Geolocation
  }
);

位置请求可以使用 PositionOptions 对象来配置，作为第三个参数提供。这个对象支持以下 3 个属性：

enableHighAccuracy 布尔值，是否返回高精度位置，如果为 true 会使用 GPS 确定设备位置，更耗电
timeout 超时时间，毫秒
maximumAge 坐标的最长有效期，毫秒

在设备连接到网络时， window 对象上触发 online 事件。响应地，当设备断开网络连接后，window 对象上触发 offline 事件。可以通过 navigator.onLine 属性来确定浏览器的联网状态。这个属性返回一个布尔值，表示浏览器是否联网。

const connectionStateChange = () => console.log(navigator.onLine);
window.addEventListener('online', connectionStateChange); window.addEventListener('offline', connectionStateChange);

浏览器可以访问设备电池及充电状态的信息。navigator.getBattery() 方法会返回一个期约实例，解决为一个 BatteryManager 对象。

navigator.getBattery().then((b) => console.log(b));
// BatteryManager { ... }

BatteryManager 包含 4 个只读属性，提供了设备电池的相关信息：

charging 布尔值，表示设备当前是否正接入电源充电
chargingTime 整数，表示预计离电池充满还有多少秒
dischargingTime 整数，表示预计离电量耗尽还有多少秒
level 浮点数，表示电量百分比

API 还提供了 4 个电池相关的回调函数，可以通过添加监听器使用属性：

onchargingchange
onchargingtimechange
ondischargingtimechange
onlevelchange

第13章 客户端检测

第13章客户端检测